<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>枫叶智能客服系统</title>
		<meta name="keywords" content="枫叶,智能,客服">
		<meta name="description" content="枫叶智能客服系统">
		<%@ include file="public/head.jspf"%>
		<style type="text/css">
			.box .content .left{text-align:left;line-height:30px;}
			.box .content .right{text-align:right;line-height:30px;}
			#data{margin:5px auto;padding:0 5px;}
		</style>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	</head>
	<body>
		<div class="box">
			<h1>枫叶智能客服系统<a class="back">返回</a></h1>
			<input type="text" class="dark text" name="content" />
			<input type="button" class="dark button" value="提交" />
			<div class="content">
				<div id="data">
					<div class="left">小枫：您好，有什么可以帮到您的吗？</div>
					<div class="right">小叶：您好！</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$(".btn").click(reply());
				$(document).keydown(function(event){
					if(event.keyCode == 13){
						reply();
					}
				});
				function reply(){
					var value = $(".text").val();
					if(value!=""){
						$(".text").val("");
						$(".content").prepend("<div id='data'><div class='right'>小叶：" + value + "</div></div>");
						$.ajax({
							type:"post",
							url:"reply",
							data:{"info":value},
							success:function(data){
								var json = eval("(" + data + ")");
								var text = json.text;
								$("#data").prepend("<div class='left'>小枫：" + text + "</div>");
							}
						});
					}
				}
			});
		</script>
	</body>
</html>